<template>
  <div>
    <HomeSearch @showSearch="showSearch" />
    <Tabs
      v-model:active="active"
      title-inactive-color="#b1b1b8"
      title-active-color="#5e5e68"
      class="plus"
    >
      <Tab v-for="List in headerList" :title="List.title"> </Tab>
      <div class="unfold" @click="isShowMark=!isShowMark">
        <img src="@/assets/images/listening/箭头 上.svg" alt="" />
      </div>
      <div class="mark" v-show="isShowMark">
        <div class="header">
          <div class="left">
            <span>请选择分类</span>
          </div>
          <div class="right">
            <div class="unfold">
              <img
                src="@/assets/images/listening/箭头 下.svg"
                alt=""
                @click="isShowMark = !isShowMark"
              />
            </div>
          </div>
        </div>
        <div
          id="content"
          class="content"
          style="background: white; height: 380px"
        >
          <div class="span_box">
            <span v-for="item in headerList">{{ item.title }}</span>
          </div>
        </div>
      </div>

      <div class="list-container">
        <div class="list-item" v-for="content in containerList">
          <img
            :alt="content.title"
            class="item-img"
            :src="content.coverPathSmall"
          />
          <div class="item-text" style="">
            <p class="item-title">{{ content.title }}</p>
            <p class="item-tiems">
              <img
                src="../../assets/images/listening/播放.svg"
                alt=""
                style="width: 20px; height: 20px; float: left"
              />
              <span
                class="sound-count"
                style="
                  font-size: 4px;
                  color: #a3a3ac;
                  margin-left: 4.5px;
                  margin-right: 14px;
                "
                >{{ content.dataCount }}</span
              >
              <span style="font-size: 4px; color: #a3a3ac">2021-3-11更新</span>
            </p>
          </div>
        </div>
      </div>
    </Tabs>
  </div>

  <ActionSheet v-model:show="isShowSearch">
    <Search @cancel="cancel()" />
  </ActionSheet>
</template>

<script lang="ts">
// 引入搜索组件
import Search from '@/components/Search/index.vue';
import HomeSearch from '@/components/HomeSearch/index.vue';
import { ActionSheet } from 'vant';
import { defineComponent, onMounted, ref } from 'vue';
export default defineComponent({
  name: 'Listening',
});
</script>
<script lang="ts" setup>
import {
  getlisteningContainerListApi,
  getlisteningHeaderListApi,
} from '@/api/listening';
import { categoriesList, subjectsListModel } from '@/api/model/listeningModel';
import { Tab, Tabs } from 'vant';
const active = ref(0);

// 控制搜索组件显示的标识
const isShowSearch = ref(false);

// 自定义事件——搜索页将取消按钮的状态传递过来
const cancel = () => {
  isShowSearch.value = false;
};

// 显示搜索框
const showSearch = () => {
  isShowSearch.value = true;
};

// 显示mark层的标识
const isShowMark = ref(false);

const headerList = ref<categoriesList>();
const containerList = ref<subjectsListModel>();

/* 听单头部分类  start*/
const getlisteningList = async () => {
  const result = await getlisteningHeaderListApi();
  console.log(result);
  headerList.value = result.categories;
  console.log(headerList.value);
};

/* 听单头部分类  end*/
const getlisteningContainer = async () => {
  const container = await getlisteningContainerListApi();
  containerList.value = container.subjects;
  console.log(container.subjects, 'container');
};
/*  */

onMounted(() => {
  getlisteningList();
  getlisteningContainer();
});
</script>

<style lang="scss" scoped>
.plus {
  position: relative;
}
.mark {
  z-index: 2;
  background-color: white;
  width: 100vw;
  height: 392px;
  // border:1px solid red;
  position: absolute;
  top: 0px;
  left: -8px;
  box-sizing: border-box;
}
.mark .header {
  height: 50px;
  background-color: white !important;
  border-bottom: 1px solid #ccc;
}
.mark .header .left {
  // border-bottom: 1px solid #ccc !important;
  // height: 50px !important;
  width: 100% !important;
  background-color: white !important;
  z-index: 10000;
}
.mark .header .left span {
  font-size: 14px;
  color: #a3a3ac;
  margin-left: 20px;
}
.mark .header .unfold {
  top: -32px;
  left: 333px;
  height: 33px;
}

.mark #content {
  width: 343px;
  background-color: white !important;
  z-index: 10000;
  position: relative;
  top: -13px;
  left: 0px;
  border: 1px solid #ccc;
  padding: 15px;
  overflow: scroll;
}
.mark #content span {
  height: 32px;
  width: 102px;
  font-size: 16px;
  display: inline-block;
  text-align: center;
  line-height: 32px;
  margin-left: 10px;
  // padding: 15px;
  background: #f3f4f5;
  margin-top: 20px;
}
.unfold {
  padding-top: 15px;
  // box-sizing: border-box;
  padding-left: 15px;
  line-height: 29px;
  width: 25px;
  height: 29px;
  border-left: 1px solid #ccc;
  font-size: 12px;
  position: relative;
  left: 325px;
  top: -45px;
  background: white;
  border-bottom: 1px solid #ccc;
}
.unfold img {
  float: left;
  width: 14px;
  height: 14px;
}
.list-container {
  float: left;
  margin-top: -50px !important;
  width: 100%;
  // height: auto;
  margin: auto;
}
.list-item {
  width: 96%;
  height: 100px;
  margin-left: 4%;
  position: relative;
  border-bottom: 1px solid #a3a3ac;
}
.list-item .item-text {
  display: inline-block;
  width: 73.889%;
  height: 70px;
  vertical-align: middle;
  margin-left: 10px;
}
.list-item .item-img {
  width: 70px;
  height: 70px;
  margin: 20px 0;
  display: inline-block;
  vertical-align: middle;
}
.list-item .item-text .item-title {
  height: 44px;
  text-align: left;
  font-size: 16px;
  color: #40404c;
  letter-spacing: 0;
  white-space: normal;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-family: PingFangSC-Medium;
  overflow: hidden;
  margin: 0px;
}
.list-item .item-times {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #a3a3ac;
  letter-spacing: 0.5px;
}
</style>
